<template>
  <div class="container">
    <!-- header -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/ComplaintsSuggestions' }">
          投诉建议
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>投诉建议</h1>
    </div>
    <!-- search-box -->
    <div class="search-box">
      <el-form :model="searchData">
        <el-form-item label="处理状态" :required="true">
          <el-select v-model="searchData.processingStatus" placeholder="请选择">
            <el-option
              v-for="v in processingStatusOption"
              :label="v.complaintType"
              :value="v.id"
              :key="v.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="访客姓名">
          <el-input v-model="searchData.visitorName" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- list -->
    <div class="list">
      <div class="list-title">
        <div>投诉列表</div>
        <div class="operation-box">
          <el-button type="default">批量操作</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column property="id" type="selection" width="55" />
        <el-table-column property="complaintType" label="投诉类型" width="120">
          <template #default="scope">{{ scope.row.complaintType }} </template>
        </el-table-column>
        <el-table-column
          property="problemDescription"
          label="问题描述"
          width="334"
          align="center"
        />
        <el-table-column property="status" label="处理状态" />
        <el-table-column property="complainantName" label="投诉人姓名" />
        <el-table-column width="218" property="tel" label="手机号码" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              text
              @click="handleEdit(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="list-footer">
        <!-- page -->
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Page from '../../../components/Page.vue';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchData = reactive({
  processingStatus: '',
  visitorName: '',
});
let tableData = ref<User[]>([]);
const total = ref(0);
const page = ref(1);
const count = ref(5);
const processingStatusOption = ref([{ id: 0, complaintType: '' }]);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

//table
const cellStyle = ref({ height: '60px', fontSize: '15px' });
const headerStyle = ref({ height: '60px', fontSize: '15px', color: 'black' });
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
// 删除
const handleEdit = (row: User) => {
  router.push({ path: '/home/ComplaintDetails' });
  // axios({
  //   url:'/complaint/delete',
  //   method:'delete',
  //   params:{
  //     id:row.id
  //   }
  // }).then(({data})=>{
  //   if(data.code=='0'){
  //     ElMessage.success('删除成功！')
  //     getData();
  //   }else{
  //     ElMessage.error('删除失败！')
  //   }
  // })
};
// 重置
const reset = () => {
  searchData.processingStatus = '';
  searchData.visitorName = '';
  getData();
};
// 下拉
const list = () => {
  axios({
    url: '/complaintType/queryComplaintTypeList',
    method: 'get',
  }).then(({ data }) => {
    data.forEach((v: any) => {
      switch (v.id) {
        case 1:
          v.complaintType = '待处理';
          break;
        case 2:
          v.complaintType = '处理中';
        case 3:
          v.complaintType = '已完成';
      }
    });
    processingStatusOption.value = data;
  });
};
interface User {
  id: number;
  complaintType: string;
  problemDescription: string;
  status: string;
  complainantName: string;
  tel: string;
}
const getData = () => {
  axios({
    url: '/complaint/list',
    method: 'get',
    params: {
      params: {},
      page: page.value,
      limit: count.value,
      stateId: searchData.processingStatus,
      complainant: searchData.visitorName,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      total.value = data.total;
      let arr: User[] = [];
      data.data.forEach((v: any) => {
        arr.push({
          id: v.id,
          complaintType: v.complaintType.complaintType,
          problemDescription: v.description,
          status: v.state.type,
          complainantName: v.complainant,
          tel: v.phone,
        });
      });
      tableData.value = arr;
    } else {
      ElMessage.error('加载失败！');
    }
  });
};
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getData();
};
onMounted(() => {
  getData();
  list();
});
//page
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    height: 97px;
    background: #fff;
    margin-top: 25px;
    border-bottom: 1px solid #f0f2f5;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .search-box {
    width: 1136px;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .el-form-item {
        width: 300px;
        display: flex;
        align-items: center;
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
  .list {
    width: 1136px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .list-title {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        line-height: 28px;
      }
    }

    .list-footer {
      width: 95%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
